<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <script src="js/jquery-3.3.1.js"></script>

    <script>
        /**
         * 表单校验:1.邮箱：邮箱格式
         *         2.密码：单词字符，长度8到20位
         *         3.确认密码：单词字符，长度8到20位
         *         4.验证码：非空
         */
        //校验邮箱
        function checkUsername() {
            //1. 获取邮箱的值
            var username = $("#username").val();
            //2. 定义正则表达式
            var reg_username = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            //3. 判断，给出提示信息
            var flag = reg_username.test(username);
            if (flag) {
                //邮箱合法
                $("#username").css("border", "1px solid green");
            } else {
                //邮箱非法
                $("#username").css("border", "1px solid red");
            }
            return flag;
        }

        //校验密码
        function checkPassword() {
            //1. 获取密码的值
            var password = $("#password").val();
            //2. 定义正则表达式
            var reg_password = /^[\dA-Za-z\.\*=#]{8,20}$/;
            //3. 判断，给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //邮箱合法
                $("#password").css("border", "1px solid green");
            } else {
                //邮箱非法
                $("#password").css("border", "1px solid red");
            }
            return flag;
        }

        //确认密码
        function checkpwd() {
            //1. 获取密码的值
            var password = $("#check_pwd").val();
            //2. 定义正则表达式
            var reg_password = /^[\dA-Za-z\.\*=#]{8,20}$/;
            //3. 判断，给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //邮箱合法
                $("#check_pwd").css("border", "1px solid green");
            } else {
                //邮箱非法
                $("#check_pwd").css("border", "1px solid red");
            }
            return flag;
        }

        //校验验证码
        function checkCode() {
            //1. 获取验证码的值
            var check = $("#check").val();
            //2. 判断验证码是否为空
            var flag = !(check.length == 0);
            if (flag) {
                //验证码不为空
                $("#check").css("border", "1px solid green");
            } else {
                //验证码为空
                $("#check").css("border", "1px solid red");
            }
            return flag;
        }

        $(function () {
            //表单提交时，调用所有的校验方法
            $("#registerForm").submit(function () {
                //1. 发送数据到服务器
                if (checkUsername() && checkPassword() && checkpwd() && checkCode()) {
                    $.post("user/regist", $("#registerForm").serialize(), function (data) {
                        if (data.flag) {
                            location.href = "register_ok.html";
                        } else {
                            alert(data.errorMsg);
                        }
                    });
                }
                return false;
            });

            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#check_pwd").blur(checkpwd);
            $("#check").blur(checkCode);
        });
    </script>
</head>
<body><!-------------------reg-------------------------->
<div class="reg">
    <form id="registerForm" action="">
        <h1><a href="index.html"><img src="img/temp/logo.png"></a></h1>
        <p>用户注册</p>
        <p><input type="text" id="username" name="username" placeholder="请输入注册邮箱"></p>
        <p><input type="text" id="password" name="password" placeholder="请输入密码"></p>
        <p><input type="text" id="check_pwd" name="check_pwd" placeholder="请确认密码"></p>
        <p class="txtL txt"><input class="code" type="text" id="check" name="check" placeholder="验证码">
            <img src="checkCode" onclick="changeCheckCode(this)">
            <script type="text/javascript">
                //图片点击事件
                function changeCheckCode(img) {
                    img.src = "checkCode?" + new Date().getTime();
                }
            </script>
        </p>
        <p><input type="submit" value="注册"></p>
        <p class="txtL txt">完成此注册，即表明您同意了我们的
            <a href="#">使用条款和隐私策略</a>
        </p>
        <p class="txt"><a href="login.html"><span></span>已有账号登录</a></p>
    </form>
</div>
</body>
</html>